<template>
	<view class="ticket">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src">
			</image>

			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text><text>{{ view.user.mobile }} |
					</text><text>{{ view.user.level === 0 ? '普通會員' : '' }} | </text><text @click="logout">退出</text>
				</view>
			</view>
			<view class="ticket_box" @click="jump('pay')">
				<u-cell-group>
					<u-cell title="電子票券名稱" :isLink="false" :value="view.ticket.title"></u-cell>
					<u-cell title="使用範圍" :isLink="false" :value="view.ticket.room_type_name"></u-cell>
					<u-cell title="有效期" :isLink="false" :value="`${formatDate(view.ticket.end_time)}`"></u-cell>
					<u-cell title="優惠券" :value="`${view.coupon ? view.coupon : '選擇優惠券'}`" @click="isCouponShow = true"
						:isLink="true"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="footer">
			<view class="bot_nav_btn_box">
				<view class="container">
					<view class="describe">
						<text>總計：</text>
						<text>$</text>
						<text>{{ form.money * 1 }}</text>
					</view>
					<view class="btn" @click="toPay">支付</view>
				</view>
			</view>
		</view>
		<view class="feature">
			<u-popup :show="isCouponShow" bgColor="#f8f8f8" :round="10" mode="bottom" :closeable="true" @close="close">
				<custom-coupon style="height: 500rpx; padding-top: 60rpx" :list="options.coupon" @slected="slected">
				</custom-coupon>
			</u-popup>
			<!-- <custom-pay
				v-if="isPayShow"
				src="/hybrid/html/pay.html"></custom-pay> -->
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		getRoomList,
		getCouponList
	} from '@/api/user';
	import {
		formatDate
	} from '@/utils/formatDate';
	import customCoupon from './components/customCoupon.vue';
	import CustomPay from '@/components/CustomPay/CustomPay.vue';
	export default {
		components: {
			customCoupon,
			CustomPay
		},
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				disabled: false,
				isCouponShow: false,
				isPayShow: false,
				changeText: '获取验证码',
				view: {
					ticket: {},
					user: {},
					store: '',
					coupon: '',
					count: 0,
					couponMoney: 0,
				},
				form: {
					ticketId: '',
				},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				options: {
					coupon: [],
				},
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				page: 1,
				timer: null,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
			const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
			const {
				user
			} = useStore();
			this.form = {
				...user.ticket,
				coupon: ''
			};
			this.view = {
				ticket: user.ticket,
				user: userOptions,
				store: equipmentOptions.name,
				coupon: '',
			};

			console.log(this.view.ticket, '票券詳情')

			this.getRoomList(user.ticket);
			this.getCouponList();
			this.setSwiperImg();
			// console.log(user);
			// const token = JSON.parse(uni.getStorageSync('token'))
			// 	? JSON.parse(uni.getStorageSync('token'))
			// 	: ''; // 1 店家 2商家
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 	});
			// } else {
			// }
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		methods: {
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				// console.log('equipmentOptions', equipmentOptions.imagejh);
				// const _src = equipmentOptions.imagejh
				// 	? equipmentOptions.imagejh.split(',')
				// 	: [];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }
				this.src = baseURL + equipmentOptions.image3
			},
			countdown() {
				this.timer = setTimeout(() => {
					// uni.navigateTo({
					// 	url: '/pages/index/index',
					// });
				}, 1000 * 60 * 10);
			},
			clearCountdown() {
				clearTimeout(this.timer);
				this.countdown();
			},
			slected(data) {
				if (this.view.ticket.money >= data.min) {
					// this.view.ticket.money = this.view.ticket.money - data.money;
					this.view.coupon = data.title;
					this.view.couponMoney = data.money * 1;
					this.form.money = this.view.ticket.money - data.money;
					this.form.ticketId = data.id;
				}
				this.close();
				// console.log('this.view.couponMoney', this.view.couponMoney);
				// console.log('data909sd0f98sd0f9', data);
			},
			toPay() {
				this.isPayShow = true;
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
				const {
					user
				} = useStore();
				// console.log('ticketId', user);
				const params = Object.assign({
						store_id: equipmentOptions.id,
						card_id: user.getTicket.id,
						type: 1,
						pay_type: 5,
					},
					this.form.ticketId ? {
						coupon_id: this.form.ticketId
					} : {}
				);
				uni.request({
					url: baseURL + '/api/order/buyCoupons',
					data: params,
					header: {
						token: userOptions.token,
						Accept: 'application/json',
						'Content-Type': 'application/json',
						'X-Requested-With': 'XMLHttpRequest',
					},
					method: 'POST',
					sslVerify: true,
					success: res => {
						const {
							order
						} = useStore();
						const _obj = {
							id: res.data.data.order_no,
							disbursements: this.form.money,
						};
						order.setOrderObjState(_obj);

						// console.log(res.data.data,'訂單號')

						uni.navigateTo({
							url: `/pages/pay/slotMachines/slotMachines?orderNo=${res.data.data.order_no}`
						})


						// this.jump('pay');
						// console.log('返回支付订单号等信息', _obj);
					},
					fail: error => {},
				});
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			getCouponList() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				getCouponList({
					type: 1,
					page: this.page,
					store_id: equipmentOptions.id,
				}).then(res => {
					this.options.coupon = res;
					// console.log('view', res);
				});
			},
			formatDate(data) {
				return formatDate(data);
			},
			getRoomList(data) {
				const id = data.room_type;
				if (id !== 0) {
					// getRoomList({}).then(res => {
					// 	console.log(res,'res')
					// 	const arr = res.find(item => item.id === id);
					// 	console.log('arr', arr);
					// 	this.view.ticket.room_type_name = arr[0].name;
					// });
				} else {
					this.view.ticket.room_type_name = '全场通用';
				}
			},
			close() {
				this.isCouponShow = false;
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'register':
						url = '/pages/register/register';
						break;
					case 'codeLogin':
						url = '/pages/menu/menu';
						break;
					case 'scanCode':
						url = '/pages/scanCode/scanCode';
						break;
						// case 'pay':
						// 	url = '/pages/pay/slotMachines/slotMachines';
						// 	break;
					case 'logout':
						url = '/pages/index/index';
						break;
					default:
				}
				uni.navigateTo({
					url
				});
			},
			logout() {
				uni.removeStorageSync('userOptions');
				this.jump('logout');
			},
			handShopping() {
				// console.log('购买');
			},
			back() {
				uni.reLaunch({
					url: '/pages/ticket/ticket'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.ticket {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 150rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;
				z-index: 11;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx;

			.title {
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: $uni-color-green;
				display: flex;
				justify-content: space-between;
			}

			.ticket_box {
				position: relative;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				background-color: $uni-color-white;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 250rpx;
					height: 150rpx;
					text-align: center;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: $uni-color-white;
					-webkit-mask-image: radial-gradient(circle at 500rpx 8rpx,
							transparent 8rpx,
							$uni-color-green 9rpx),
						radial-gradient(closest-side circle at 50%,
							$uni-color-green 99%,
							transparent 100%);
					-webkit-mask-size: 100%, 10rpx 20rpx;
					-webkit-mask-repeat: repeat, repeat-y;
					-webkit-mask-position: 140rpx 10rpx, 245rpx;
					-webkit-mask-composite: source-out;
					mask-composite: subtract;
					background-color: $uni-color-green;
				}

				.right {
					flex: 1;
					height: 150rpx;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.expir {
						font-size: 24rpx;
						color: $uni-color-grey-dark;
					}
				}

				.btn {
					position: absolute;
					right: 0;
					bottom: 50rpx;
					height: 40rpx;
					padding: 0 10rpx;
					border: 2rpx solid $uni-color-green;
					line-height: 40rpx;
					text-align: center;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: $uni-color-green;
				}
			}
		}

		.footer {
			.bot_nav_btn_box {
				position: fixed;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: $uni-color-white;

				.container {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;

					.describe {
						padding-left: $uni-spacing-row-base;
						text-align: left;
						color: $uni-color-red-light;
					}

					.btn {
						width: 300rpx;
						text-align: center;
						background-color: $uni-color-green;
						color: $uni-color-white;
					}
				}
			}
		}

		.feature {
			position: relative;
		}
	}
</style>